<template>
    <div class="info">
         <div class="title">
            个人资料
         </div>
         <div class="content">
            <p>医生信息</p>
            <div class="inputbox">
                <div class="item">
                    <span class="pre">医生编号</span>
                    <span class="input">{{id}}</span>
                </div>
                <div class="item">
                    <span class="pre">用户名</span>
                    <el-input class="input" v-model="username" placeholder="用户名" />
                </div>

                <div class="item">
                    <span class="pre">医生头像</span>
                    <el-upload
                    style="width:60px;height:60px"
                        class="avatar-uploader"
                        action="#"
                        :auto-upload="false"
                        :show-file-list="false"
                        :on-change="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                    >
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>

                        <!-- <el-upload style="width:60px;height:60px" action="#" list-type="picture-card" :auto-upload="false"
                            :limit="1"
                            :show-file-list="false"
                            >
                            <el-icon><Plus /></el-icon>
                            <template #file="{ file }">
                            <div style="width:60px;height:60px">
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                <span
                                    class="el-upload-list__item-preview"
                                    @click="handlePictureCardPreview(file)"
                                >
                                    <el-icon><zoom-in /></el-icon>
                                </span>
                                </span>
                            </div>
                            </template>
                        </el-upload>

                        <el-dialog v-model="dialogVisible">
                            <img w-full :src="dialogImageUrl" alt="Preview Image" />
                        </el-dialog> -->

                </div>

                <div class="item">
                    <span class="pre">医生姓名</span>
                    <el-input class="input" v-model="name" placeholder="医生头像" />
                </div>
                <div class="item">
                    <span class="pre">医生角色</span>
                    <el-select class="input" v-model="role" placeholder="医生角色">
                        <el-option
                        v-for="item in roles"
                        :key="item"
                        :value="item"
                        />
                    </el-select>
                </div>
                <div class="item">
                    <span class="pre">性别</span>
                    <el-select class="input" v-model="sex" placeholder="性别">
                        <el-option
                        v-for="item in sexs"
                        :key="item"
                        :value="item"
                        />
                    </el-select>
                </div>              
            </div>
            <div class="textarea">
                <span class="pre">医生简介</span>
                <el-input
                style="width:500px;font-size: 13px;color: black;"
                    v-model="introduction"
                    :autosize="{ minRows: 2, maxRows: 6 }"
                    type="textarea"
                    placeholder="医生简介"
                />
            </div>
            <div class="textarea">
                <span class="pre">医生擅长</span>
                <el-input
                style="width:500px;font-size: 13px;color: black;"
                    v-model="speciality"
                    :autosize="{ minRows: 2, maxRows: 6 }"
                    type="textarea"
                    placeholder="医生擅长"
                />
            </div>
            <el-button style="margin:25px;background-color: rgb(41,132,248);" type="primary" size="large" @click="save">保存</el-button>
         </div>
    </div>
</template>
  
  <script lang="ts" setup>
    import {ref, reactive,toRefs } from 'vue';
    // import type { UploadFile  } from 'element-plus'
    import { ElMessage  } from 'element-plus'
    // import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
    import type {  UploadProps } from 'element-plus'
    import { useRouter } from 'vue-router';

    const roles = ["系统管理员","全科医师","全科护士","护理医师"]
    const sexs = ["男","女"]

    /* const dialogImageUrl = ref('')
    const dialogVisible = ref(false)
    const disabled = ref(false)
    const handlePictureCardPreview = (file: UploadFile) => {
        dialogImageUrl.value = file.url!
        dialogVisible.value = true
        } */
        //limit 1
    // const upload = ref<UploadInstance>()
    // const handleExceed: UploadProps['onExceed'] = (files) => {
    //     upload.value!.clearFiles()
    //     const file = files[0] as UploadRawFile
    //     file.uid = genFileId()
    //     upload.value!.handleStart(file)
    //     }
    const imageUrl = ref('')

    const handleAvatarSuccess: UploadProps['onSuccess'] = (

    uploadFile
    ) => {
    imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    }

    const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif') {
        ElMessage.error('上传文件格式错误!')
        return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error('文件大小超过 2MB!')
        return false
    }
    return true
    }
       
    const doctorInfo = reactive({
        id:'2019090009',
        username:"甜面酱",
        name:"李华",
        role:"",
        sex:"男",
        introduction:`  北京大学第一医院内分泌科专家，从事内分泌相关疾病35余年，尤其擅长代谢性疾病引起的不孕不育诊疗，现任北京天伦医院不孕不育妇科特聘专家。`,
        speciality:`  甲状腺疾病及内分泌疾病，
擅长甲亢、甲减、桥本病、糖尿病、多囊卵巢、
代谢异常、甲状腺炎、甲状腺低下、甲状腺功能减退、
甲状腺功能失调、甲状腺激素异常等引起的不孕不育症的治疗和孕期管理、
生活指导，在治疗各种代谢内分泌异常方面有丰富的临床经验。`
    })
    const {id,username,name,role,sex,introduction,speciality} = toRefs(doctorInfo)
    const router = useRouter()
    const save = ()=>{
        ElMessage({
            message: '保存成功',
            type: 'success',
        })
        // router.push('/home/worktabe')
        setTimeout(() => {
            router.back()
        }, 1000);  
    }
        
  </script>
  <style lang="less" scoped>
  .info{
    background-color: #fff;
    padding: 20px;
    .title{
        font-weight: 500;
        font-style: normal;
        font-size: 18px;
        color: rgba(51, 51, 51, 0.898039215686275);
        text-align: left;
        position: relative;
        width: 200px;
        margin-left: 20px;
        border-bottom: 1px solid gray;
        &::before{
            content: '';
            display: block;
            background-color: rgb(41,132,248);
            position: absolute;
            top: 0;
            left: -16px;
            bottom: 0;
            right: 208px;
            border-radius: 3px;
        }
    }
    .content{
        color: #333;
        border-top: 1px solid #eee;
        margin-top: 5px;
        font-size: 13px;
        .inputbox{          
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            height: 150px;
            .item{
                width: 33%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .pre{  
                    color: #999;
                    margin-right: 15px;
                    width: 55px;
                }
                .input{
                    width: 250px;
                    // height: 50px;
                }
            }
        }
        .textarea{
            margin-top: 20px;
            .pre{
                color: #999;
                margin-right: 15px;
                width: 55px;
                vertical-align: top;
            }
        }
    }
  }
  .el-input{
    font-size: 13px;
  }
  :deep(.el-upload-list--picture-card .el-upload-list__item),:deep(.el-upload-list--picture-card),:deep(.el-upload--picture-card){
    width: 60px;
    height: 60px;
  }
  .avatar-uploader .avatar {
    width: 60px;
    height: 60px;
    display: block;
  }
  .avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 60px;
  height: 60px;
  text-align: center;
}
  </style>
  